import React from 'react';
import { Col, Row, Button } from 'antd';
import { history } from 'umi';
import { ProjectPie } from '../charts';
import styles from './style.less';

const VersionInfo = ({ data }) => {
    const { taskProductVO = {}, productPostVOList = [] } = data;
    return (
        <Row className={styles.wrap} type="flex" gutter={48}>
            <Col xl={{ span: 8 }} lg={{ span: 24 }} sm={{ span: 24 }} className={styles.verbox}>
                <div className={styles.title}>累计上线：{taskProductVO.totalOnlineVersionNum}个版本</div>
                <div className={styles.box}>
                    <div>
                        <p>{taskProductVO.developVersionNum}</p>
                        <p className={styles.boxintro}>研发中版本</p>
                    </div>
                    <div>
                        <p>{taskProductVO.testVersionNum}</p>
                        <p className={styles.boxintro}>测试中版本</p>
                    </div>
                    <div>
                        <p>{taskProductVO.onlineVersionNum}</p>
                        <p className={styles.boxintro}>已完成版本</p>
                    </div>
                </div>
                <div className={styles.versionlast}>
                    <Button
                        type="ghost"
                        className={styles.verionlastbtn}
                        onClick={() => {
                            history.push('/stat/workStat/workOverview/work/version');
                        }}
                    >
                        最新上线：{taskProductVO.latestOnlineProductVersionName}
                    </Button>
                </div>
            </Col>
            <Col xl={{ span: 16 }} lg={{ span: 24 }}>
                <div className={styles.chartwrap}>
                    <ul className={styles.chartintro}>
                        <li>产品负责人：{taskProductVO.productLeaderName}</li>
                        <li>研发负责人：{taskProductVO.developLeaderName}</li>
                        <li>项目组：{taskProductVO.projectGroup}</li>
                        <li>计划工作量：{taskProductVO.planWorkloadNum}小时</li>
                        <li>额定工作量：{taskProductVO.shouldDoneWorkloadNum}小时</li>
                        <li>已完成工作量：{taskProductVO.actualDoneWorkloadNum}小时</li>
                    </ul>
                    <div style={{ width: 560 }}>
                        <ProjectPie data={productPostVOList} />
                    </div>
                </div>
            </Col>
        </Row>
    );
};

export default VersionInfo;
